<template>
	<view class="tabs">
		<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
			<view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" :data-current="index" @click="ontabtap">
				<text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
			</view>
		</scroll-view>
		<view class="line-h"></view>
		<swiper :current="tabIndex" class="swiper-box" :duration="300" @change="ontabchange">
			<swiper-item class="swiper-item" v-for="(tab,index1) in newsList" :key="index1">
				<list class="scroll-v list"> <!--  @loadmore="loadMore(index1)" -->
					<refresh class="refresh" @refresh="onrefresh(index1)" @pullingdown="onpullingdown" :display="tab.refreshing ? 'show' : 'hide'">
						<view class="refresh-view">
							<image class="refresh-icon" :src="refreshIcon" :style="{width: (tab.refreshing || pulling) ? 0: '30px'}" :class="{'refresh-icon-active': tab.refreshFlag}"></image>
							<loading-indicator class="loading-icon" animating="true" v-if="tab.refreshing"></loading-indicator>
							<text class="loading-text">{{tab.refreshText}}</text>
						</view>
					</refresh>
					<cell>
						<view class="item">
							<text class="item-row uni-h6 uni-color-gray">名称</text>
							<text class="item-row uni-text-right uni-h6 uni-color-gray">最新价</text>
						</view>
					</cell>
					<cell v-for="(newsitem,index2) in tab.data" :key="index2">
						<view class="item" @click="onClickSymbol(newsitem.dspName)">
							<view class="item-row">
								<text v-if="index1==1 || index1==2" class="uni-bold2 uni-h4 uni-color-black">{{newsitem.baseCurrencyName}}</text>
								<text v-else class="uni-bold2 uni-h4 uni-color-black">{{newsitem.dspName}}</text>
								<text class="uni-h5 item-multiple uni-color-warn" v-if="newsitem.is_use_loan && islogin">{{newsitem.loan_multiple}}X</text>
							</view>
							<view class="item-row uni-text-right">
								<text :class="newsitem.change<0 ? 'uni-down' : 'uni-up'" class="uni-bold2 uni-h4 uni-color-black">{{newsitem.close}}</text>
							</view>
						</view>
						<view class="uni-divider"></view>
					</cell>
					
				</list>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import {
	mapState,mapMutations
} from 'vuex'


// 缓存每页最多
const MAX_CACHE_DATA = 200;
// 缓存页签数量
const MAX_CACHE_PAGE = 5;

export default {
	computed: { ...mapState(['tickers','dspName','optional','loan','islogin']) },
	components: {},
	props: {
		isloan: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			newsList: [],
			cacheTab: [],
			tabIndex: 0,
			tabBars: [{name: '自选',id: 'zixuan'},{name: 'USDT',id: 'usdt'}, 
					{name: 'QC',id: 'qc'}, {name: 'ALTS',id: 'alts'}],
			scrollInto: "",
			pulling: false,
			refreshIcon: ""
		}
	},
	mounted() {
		this.tabBars.forEach((tabBar) => {
			this.newsList.push({
				data: [],
				refreshText: ""
			});
		});
		
		this.initData();
	},
	methods: {
		...mapMutations(['setDspName']),
		initData() {
			var favorites = [];
			var usdts = [];
			var qcs = [];
			var elses = [];
			var optional = this.optional;
			var loanlist = null;
			if (this.loan && this.loan.currencyPairLst) {
				loanlist = this.loan.currencyPairLst
			}
			for (var i=0; i<this.tickers.length; i++) {
				var obj = this.tickers[i];
				
				if (this.isloan == 1 && obj.is_use_loan == 0) {
					continue;
				}
				
				// 设置倍数
				if (obj.is_use_loan == 1 && loanlist) {
					obj.loan_multiple = loanlist[obj.symbol.toUpperCase()].loan_multiple;
				}
				
				if (obj.quoteCurrencyName === "USDT") {
					usdts.push(obj);
				} else if (obj.quoteCurrencyName === "QC") {
					qcs.push(obj);
				} else {
					elses.push(obj);
				}
				
				// 添加自选
				for (var j=0; j<optional.length; j++) {
					if (obj.symbol.toUpperCase() == optional[j].pair_dsp_name) {
						favorites.push(obj);
						break;
					}
				}
			}
			this.newsList[0].data = favorites;
			this.newsList[1].data = usdts;
			this.newsList[2].data = qcs;
			this.newsList[3].data = elses;
			if (optional.length < 1) {
				this.switchTab(1);
			}
		},
		loadMore(e) {
			console.log("loadMore:"+JSON.stringify(e));
		},
		ontabtap(e) {
			let index = e.target.dataset.current || e.currentTarget.dataset.current;
			this.switchTab(index);
		},
		ontabchange(e) {
			let index = e.target.current || e.detail.current;
			this.switchTab(index);
		},
		switchTab(index) {
			if (this.tabIndex === index) {
				return;
			}

			// 缓存 tabId
			if (this.newsList[this.tabIndex].data.length > MAX_CACHE_DATA) {
				let isExist = this.cacheTab.indexOf(this.tabIndex);
				if (isExist < 0) {
					this.cacheTab.push(this.tabIndex);
					//console.log("cache index:: " + this.tabIndex);
				}
			}

			this.tabIndex = index;
			this.scrollInto = this.tabBars[index].id;

			// 释放 tabId
			if (this.cacheTab.length > MAX_CACHE_PAGE) {
				let cacheIndex = this.cacheTab[0];
				this.clearTabData(cacheIndex);
				this.cacheTab.splice(0, 1);
				//console.log("remove cache index:: " + cacheIndex);
			}
		},
		clearTabData(e) {
			this.newsList[e].data.length = 0;
		},
		onrefresh(e) {
			var tab = this.newsList[this.tabIndex];
			if (!tab.refreshFlag) {
				return;
			}
			tab.refreshing = true;
			tab.refreshText = "正在刷新...";
			this.pulling = true;

			setTimeout(() => {
				tab.refreshing = false;
				tab.refreshFlag = false;
				tab.refreshText = "已刷新";
				this.pulling = false;
			}, 500);
		},
		onpullingdown(e) {
			var tab = this.newsList[this.tabIndex];
			if (tab.refreshing || this.pulling) {
				return;
			}
			if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
				tab.refreshFlag = true;
				tab.refreshText = "释放立即刷新";
			} else {
				tab.refreshFlag = false;
				tab.refreshText = "下拉可以刷新";
			}
		},
		onClickSymbol(dspName) {
			this.setDspName(dspName);
		}
	}
}
</script>

<style lang="scss">
.tabs {
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	background-color: #ffffff;
	/* #ifdef MP-ALIPAY || MP-BAIDU */
	height: 100vh;
	/* #endif */
}
.scroll-h {
	width: 220px;
	height: 80rpx;
	flex-direction: row;
	flex-wrap: nowrap;
}
.line-h {
	height: 1rpx;
	background-color: #cccccc;
}
.uni-tab-item {
	/* #ifndef APP-PLUS */
	display: inline-block;
	/* #endif */
	flex-wrap: nowrap;
	flex: 1;
	text-align: center;
	align-items: center;
}
.uni-tab-item-title {
	color: #555;
	font-size: 30rpx;
	height: 80rpx;
	line-height: 80rpx;
	flex: 1;
	flex-wrap: nowrap;
	/* #ifndef APP-PLUS */
	white-space: nowrap;
	/* #endif */
}
.uni-tab-item-title-active {
	color: $uni-color-primary;
	font-weight: 800;
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	flex: 1;
	flex-direction: row;
}
.scroll-v {
	flex: 1;
}
.refresh {
	height: 64px;
	justify-content: center;
}
.loading-text {
	margin-left: 2px;
	font-size: 16px;
	color: #999999;
}
.loading-icon {
	width: 20px;
	height: 20px;
	margin-right: 5px;
	color: #999999;
}
.refresh-icon {
	width: 30px;
	height: 30px;
	transition-duration: .5s;
	transition-property: transform;
	transform: rotate(0deg);
	transform-origin: 15px 15px;
}
.refresh-icon-active {
	transform: rotate(180deg);
}
.refresh-view {
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.item {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.item:active {
	background-color: $uni-bg-color-hover;
}
.item-row {
	flex-direction: row;
	align-items: center;
	padding: $uni-spacing-col-base $uni-spacing-row-base;
}
.item-multiple {
	margin-left: $uni-spacing-row-sm;
}
</style>
